<template>
	<div>
		<div class="no-print" style="height: 42px;"></div>
		<div style="width: 100%;display: flex;">
			<div class="no-print" style="width: 30%;">.</div>
			<div class="width-100-percent">
				<div class="print-container">
					<div class="title">
						<span>前纺工艺单</span>
						<span class="print-date">{{ ruleForm.belongDate || '无' }}</span>
					</div>
					<div class="print-container-content">
						<div class="margin-top-30">
							<div class="row-gap">
								<span class="label">品种:</span>
								<span class="value">{{ ruleForm.productName || '无' }}</span>
							</div>
							<div class="row-gap">
								<span class="label">投料:</span>
								<span class="value">{{ ruleForm.feedstockQty || '0' }}Kg</span>
							</div>
						</div>
						<div class="qr-code">
							<img :src="ruleForm.qrCode" style="width: 100%;height: 100%;" alt="">
						</div>

						<div>
							<div
								v-for="(processItem) in ruleForm.processPlanLineList"
								:key="processItem.id"
								class="process-item"
							>
								<div class="label margin-bottom-10">{{ processItem.processName }}</div>
								<div class="machine-list-box">
									<div class="machine-item" style="width: 100%;">说明：{{ processItem.remark || '无' }}</div>
									<div
										v-for="(machineItem) in processItem.machineList"
										:key="machineItem.id"
										class="machine-item"
										:style="{width: processItem.processCode.toUpperCase() === 'CS' ? '100%' : ''}"
									>
										<div class="machine-item-inner">
											<div class="margin-right-10">{{ machineItem.machineName }}</div>
											<div v-if="processItem.processCode.toUpperCase() !== 'CS'">{{ `${machineItem.gramWeight || 0}g / ${machineItem.meters || 0}m` }}</div>
											<div v-if="processItem.processCode.toUpperCase() === 'CS'" class="flex-start-center">
												<span class="margin-right-10">定量: {{ `${machineItem.gramWeight || 0}g / ${machineItem.meters || 0}m` }}</span>
												<div v-if="machineItem.specSheet.specSheetParamList">
													<span
														v-for="(specSheetParamItem, specSheetParamIndex) in machineItem.specSheet.specSheetParamList"
														:key="specSheetParamIndex"
														class="margin-right-10"
													>
														{{ `${specSheetParamItem.specParamName}: ${specSheetParamItem.val}` }}
													</span>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="no-print" style="width: 30%;padding-top: 0px;">
				<div style="display: flex;flex-direction: column;">
					<div class="margin-bottom-10">
						<el-button class="no-print" type="default" :icon="!isEdit ? 'el-icon-edit-outline' : 'el-icon-check'" size="small" style="margin-left: 4px;" @click="onEditBtn"></el-button>
					</div>
					<div>
						<el-button :disabled="isEdit" class="no-print" type="default" icon="el-icon-printer" size="small" style="margin-left: 4px;" @click="onPrintBtn"></el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
    import { qslProductionGet } from '../../../../api/production/qslb';
    export default {
        data() {
            return {
                isEdit: false,
                dataId: null,
                ruleForm: {}
            };
        },
        methods: {
            onCheckChange(e) {
                const arr = this.ruleForm.prdNoticeMachineList.filter(x => e.includes(x.machineName));
                this.transferMachineData(arr);
            },
            onEditBtn() {
                this.isEdit = !this.isEdit;
            },
            onPrintBtn() {
                window.print();
            },
            getDetailRequest() {
                return qslProductionGet({ id: this.dataId }).then(res => {
                    if (res.data.status === 200) {
                        const resData = JSON.parse(JSON.stringify(res.data.res));
                        this.ruleForm = resData;
                    }
                });
            },
            async getDependentData() {
                this.dataId = this.$route.query.id;
                if (this.dataId) await this.getDetailRequest();
            }
        },
        mounted() {
            this.getDependentData();
        }
    };
</script>
<style scoped lang="scss">
$qrCodeSize: 120px;
$circleSize: 10px;

    .print-container {
        -webkit-print-color-adjust: exact;
        font-size: 24px;
        //padding: 20px;
        box-sizing: border-box;
        .print-date {
            position: absolute;
            right: 0;
            bottom: 0;
            font-size: 24px;
        }
        .title {
            margin-top: 30px;
            font-size: 44px;
            font-weight: 500;
            text-align: center;
            position: relative;
        }
        .print-container-content {
            font-weight: 500;
            border: solid 2px #0E1E3F;
            padding: 20px;
            box-sizing: border-box;
            position: relative;
            .row-gap {
                margin-bottom: 34px;
            }
            .qr-code {
                width: $qrCodeSize;
                height: $qrCodeSize;
                position: absolute;
                right: 10px;
                top: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .process-item {
                margin-bottom: 30px;
                border-bottom: solid 0px #0E1E3F;
                .machine-list-box {
                    font-weight: 400;
                    font-size: 20px;
                    display: flex;
                    flex-wrap: wrap;
                    padding: 0 30px;
                    box-sizing: border-box;
                    .machine-item {
                        width: 50%;
                        padding: 0 22px;
                        box-sizing: border-box;
                        .machine-item-inner {
                            width: 100%;
                            border-bottom: dashed 1px #0E1E3F;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            padding: 10px 0;
                            box-sizing: border-box;
                        }
                    }
                }
            }
            .label {
                margin-right: 10px;
                position: relative;
                padding-left: 20px;
            }
            .label:before {
                position: absolute;
                top: 50%;
                left: 0;
                margin-top: calc(-#{$circleSize/2});
                content: '';
                width: $circleSize;
                height: $circleSize;
                border-radius: 50%;
                background: black;
            }
            .value {
            }
        }
    }
  @media print {
    .no-print{
      display: none;
    }
  }
    @page {
        size: portrait;
        margin: 0 10mm;
    }
</style>
